import ArkChart from '../ark-chart/ArkChart.vue';
import ArkChartConstant from '../ark-chart/ArkChartConstant.js';
import {action} from '@storybook/addon-actions';

export default {
  title: 'base-component-v1/ArkChart',
  component: ArkChart,
  parameters: {
    docs: {
      description: {
        component: `请配合 <span style="font-weight: bold;font-size: 14px;color: grey">vue、echarts</span> 使用`
      }
    }
  },
  argTypes: {
    initTheme: {description: 'ECharts初始化应用主题'},
    initOpts: {description: 'ECharts初始化附加参数'},
    options: {description: 'ECharts配置对象'},
    instanced: {description: 'ECharts实例创建后的事件，参数为ECharts实例'},
  }
};

export const Line = {
  name: '折线图',
  render: (args) => ({
    components: {ArkChart},
    setup() {
      return {args};
    },
    template: '<ArkChart v-bind="args" @instanced="handleInstanced" style="height: 300px;width: 800px"/>',
    methods: {
      handleInstanced: action('instanced')
    }
  }),
  args: {
    options: {
      grid: {
        bottom: '18%',
        left: '10%',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: ArkChartConstant.LabelColor.SecondLight,
          },
        },
        formatter(params) {
          const param = params[0];
          return `${param.marker + param.name}&emsp;&emsp;${param.value}cm`;
        },
      },
      xAxis: {
        name: '时间',
        data: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00',],
      },
      yAxis: {
        name: '水位（cm）',
      },
      series: [
        {
          type: 'line',
          smooth: true,
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          emphasis: {
            focus: 'series',
          },
          areaStyle: {
            opacity: 0.8,
            color: ArkChartConstant.GradientColor.Eighth,
          },
          data: [15, 20, 60, 40, 50, 60, 70, 90, 69, 70, 41, 56, 33, 88, 55, 88, 57, 47, 89, 46, 21, 46, 67, 34, 56,],
        },
      ],
    },
  },
};

export const Bar = {
  name: '柱状图',
  render: (args) => ({
    components: {ArkChart},
    setup() {
      return {args};
    },
    template: '<ArkChart v-bind="args" @instanced="handleInstanced" style="height: 300px;width: 450px"/>',
    methods: {
      handleInstanced: action('instanced')
    }
  }),
  args: {
    options: {
      grid: {
        top: '0%',
        bottom: '18%',
        left: '0%',
        right: '0%',
      },
      xAxis: [
        {
          type: 'category',
          data: ['瞬时雨量', '本日累积雨量', '昨日累积雨量', '累积雨量'],
          axisPointer: {
            type: 'line',
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            hideOverlap: false,
            interval: 0,
            color: ArkChartConstant.LabelColor.SecondLight,
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: '雨量',
          type: 'bar',
          data: [17.5, 66.5, 26.3, 160],
          barMinHeight: 16,
          barWidth: 45,
          showBackground: true,
          backgroundStyle: {
            color: '#DFECFB',
            borderRadius: 10,
          },
          itemStyle: {
            borderRadius: 10,
            color: '#94BBE9',
          },
          label: {
            show: true,
          },
        },
      ],
    },
  },
};

export const LineBar = {
  name: '柱状折线图',
  render: (args) => ({
    components: {ArkChart},
    setup() {
      return {args};
    },
    template: '<ArkChart v-bind="args" @instanced="handleInstanced" style="height: 300px;width: 800px"/>',
    methods: {
      handleInstanced: action('instanced')
    }
  }),
  args: {
    options: {
      grid: {
        top: '25%',
        bottom: '20%',
        left: '15%',
        right: '10%',
      },
      legend: {
        textStyle: {
          color: ArkChartConstant.LabelColor.FirstLight,
        },
        data: ['实际数', '目标数', '节约率'],
      },
      tooltip: {
        trigger: 'axis',
        show: true,
        confine: true,
        axisPointer: {
          type: 'shadow',
          label: {
            show: true,
            backgroundColor: ArkChartConstant.RainbowColor[7],
          },
        },
      },
      xAxis: [
        {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
          axisPointer: {
            type: 'shadow',
          },
          axisLabel: {
            color: ArkChartConstant.LabelColor.SecondLight,
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: '用电量（kW·h）',
          barWidth: 8,
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: ArkChartConstant.LabelColor.SecondLight,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: ArkChartConstant.LabelColor.SecondLight,
            },
          },
        },
        {
          type: 'value',
          name: '节约率（%）',
          barWidth: 8,
          splitLine: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: ArkChartConstant.LabelColor.SecondLight,
            },
          },
        },
      ],
      series: [
        {
          name: '实际数',
          type: 'bar',
          barCategoryGap: '50%',
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          barWidth: 10,
          itemStyle: {
            borderRadius: 5,
            color: ArkChartConstant.GradientColor.First,
          },
          tooltip: {
            valueFormatter(val) {
              return `${val} kW·h`;
            },
          },
        },
        {
          name: '目标数',
          type: 'bar',
          barWidth: 10,
          barCategoryGap: '50%',
          barGap: '-100%',
          z: '-1',
          itemStyle: {
            borderRadius: 5,
            color: ArkChartConstant.GradientColor.Second,
          },
          data: [12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1],
          tooltip: {
            valueFormatter(val) {
              return `${val} kW·h`;
            },
          }
        },
        {
          name: '节约率',
          type: 'line',
          yAxisIndex: 1,
          itemStyle: {
            color: '#F02FC2',
          },
          data: [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
          tooltip: {
            valueFormatter(val) {
              return `${val} %`;
            },
          },
        },
      ]
    },
  },
};

export const Pie = {
  name: '玫瑰图',
  render: (args) => ({
    components: {ArkChart},
    setup() {
      return {args};
    },
    template: '<ArkChart v-bind="args" @instanced="handleInstanced" style="height: 160px;width: 800px"/>',
    methods: {
      handleInstanced: action('instanced')
    }
  }),
  args: {
    options: {
      color: ArkChartConstant.RainbowColor,
      legend: {
        orient: 'horizontal',
        icon: 'circle',
        bottom: 0,
        x: 'center',
        top: 'bottom',
        textStyle: {
          color: ArkChartConstant.LabelColor.FirstLight,
        },
      },
      tooltip: {
        trigger: 'item',
        confine: true,
      },
      series: [
        {
          type: 'pie',
          radius: [10, 35],
          center: ['50%', '35%'],
          roseType: 'area',
          label: {
            color: ArkChartConstant.LabelColor.FirstLight,
            fontSize: 10,
            show: true,
          },
          tooltip: {
            formatter(params) {
              return `${params.marker + params.name}&emsp;&emsp;${params.percent}%`;
            },
          },
          data: [
            {
              'name': '网络元系统',
              'value': '1'
            },
            {
              'name': '定位元系统',
              'value': '5'
            },
            {
              'name': '能源元系统',
              'value': '22'
            },
            {
              'name': '环境元系统',
              'value': '17'
            },
            {
              'name': '安防元系统',
              'value': '6'
            },
            {
              'name': '消防元系统',
              'value': '5'
            }
          ],
        },
      ],
    },
  },
};


// 保留前方圆点颜色的tooltip
/*formatter(params) {
  const param = params[0];
  return `${param.marker + param.name}&emsp;${param.value} 个`;
},*/
